import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import "@/assets/css/base.css"
import "@/assets/css/el-reset.css"
import qfSub from "qf-sub-menu"
import nprogress from "nprogress"
import "nprogress/nprogress.css"
Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.use(qfSub)



//路由守卫
router.beforeEach((to,from,next)=>{

  //打开进度条
  nprogress.start()
  //判断本地存储中是否有token，如果有就放行，如果没有就让他再重新跳转到登录页
  let token=localStorage.getItem('yz-token')
  if(token){
    if(store.state.userMenu.length===0){
      //说明用户的路由信息（菜单信息）没有了，需要重新发起请求（因为vuex刷新页面，数据会丢失）
      store.dispatch("FETCH_MENULIST")
      .then(()=>{
        //重新激活动态添加的路由，replace: true;的作用为 不产生历史记录 
        next({...to,replace: true})
      })
    }else{ 
      next()
    }
  }else{
    if(to.path==='/login'){
      next()
    }else{
      next({path: "/login"})
    }
  }
})

//全局后置钩子 afterEach
router.afterEach((to,from)=>{
  // console.log(to);
  // console.log(from);
  let matched=[...to.matched]//浅拷贝到一个新数组
   matched.splice(0,1)
  // console.log(matched);
  store.commit("SET_BREADCRUMB",matched)

  //停止进度条
  nprogress.done()
})

//自定义全局指令
Vue.directive("has",{
  inserted(el,binding){
    // console.log("el---",el);
    // console.log("binding---",binding);
    // console.log(binding.value);
    //获取本地按钮权限
    let permission=localStorage.getItem("yz-permissionBtn")
    permission=JSON.parse(permission)
    //console.log(permission);
    //看permission中是否包含传入的value对应字段
    //如果有，则说明具备改按钮权限
    //如果没有的话则禁用该按钮
    if(!permission.includes(binding.value)){ 
      let className=el.className
      el.className=className+" "+"is-disabled"
      el.disabled=true
    }
  }
})





new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");
